
<style>
        :root {
            --color: #4f81bd;
            --dark: #366092;
        }

        html {
            font-size: 16px;
        }

        body {
            box-sizing: border-box;
            margin: 0;
            font-size: 1rem;
            font-family: BlinkMacSystemFont, "Segoe UI", 'Microsoft YaHei';
            line-height: 1.5;
        }

        body * {
            box-sizing: inherit;
        }

        dl {
            margin: 0;
        }

        h1,
        h2 {
            margin: 0;
            font: inherit;
        }

        hr {
            margin: 0;
            border: 0;
            border-bottom: 4px solid var(--color);
            box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
        }

        p {
            margin: 0;
        }

        .container {
            width: 860px;
            margin: 0 auto;
            padding: 2rem 0;
        }

        .clearfix {
            position: relative;
            overflow: hidden;;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .info_list {
            position: relative;
        }

        .info_list dt {
            position: absolute;
            top: 0;
            left: 0;
        }

        .text_bold {
            font-weight: 700;
        }

        /* header */

        .header_title {
            float: left;
            background-image: linear-gradient(#e5004e, #851f57);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 4em;
            font-weight: 700;
            font-style: italic;
            line-height: 1.2;
        }

        .header_sub {
            position: absolute;
            right: 0;
            bottom: 0;
            color: var(--color);
            font-size: 1.9em;
        }

        .header_info {
            padding: 16px 0 40px;
        }

        .header_address dd {
            padding-left: 3rem;
        }

        .header_order dt {
            width: 6rem;
            text-align: right;
        }

        .header_order dd {
            padding-left: 10rem;
            text-align: right;
        }

        /* content */

        main {
            margin-bottom: 1.5rem;
            padding-bottom: .5rem;
            border: 2px solid var(--dark);
        }

        .content_title {
            padding: .1rem .6rem;
            background-color: var(--color);
            color: #fff;
            font-size: 1.3em;
        }

        .content_box {
            text-align: left;
            padding: 8px;
        }

        .content_footer {
            margin-top: 3rem;
        }

        .content_table {
            margin-bottom: 1rem;
            padding: 0;
        }

        .content_table table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .content_table th,
        .content_table td {
            padding: .4rem;
            text-align: center;
        }

        .content_table th :first-child{
            padding: .2rem .4rem;
            background-color: var(--color);
            color: #fff;
        }

        .content_table th {
            padding: .2rem .4rem;
            background-color: var(--color);
            color: #fff;
        }

        .content_table tr th:first-child,
        .content_table tr td:first-child {
            text-align: left;
        }
        .content_table th:nth-last-child(1),
        .content_table th:nth-last-child(2),
        .content_table td:nth-last-child(1),
        .content_table td:nth-last-child(2) {
            text-align: right;
        }

        .content_table tr:nth-last-child(2) td {
            border-top: 2px solid var(--dark);

        }

        .content_table tr:nth-last-child(1) td {

            border-bottom: 2px solid var(--dark);
        }

        .content_info {
            padding: 2rem 0;
        }

        .content_info .info_list {
            margin-left: 4rem;
        }

        .content_info dd {
            padding-left: 7rem;
        }

        /* footer */
        .footer_box {
            padding: .4rem .6rem;
        }

        .footer_address{
            text-align: left;
        }

        .footer_touch {
            padding-right: 2rem;
        }

        .footer_touch dd {
            padding-left: 4rem;
        }

        .justfiy{
            position: absolute;
            width: 310px;
            text-align: left;
        }
        .relative{
            position: relative;
        }

        #sunRunTemplate span{
            margin-left: 0px;
        }

        .content-title b{
            color: red;
        }

    </style>
<div ng-controller="sunRunDeliveryConfirmController" class="detail">
    <div class="detail ng-scope">
        <h4 class="title">收货确认单</h4>
        <button class="btn btn-default btn-bill" ng-click="goBack('fresh')">返回</button>
        <div id="form-content">
            <div class="search-order" style="border-bottom-width: 0px;">
                <div class="search-input">
                    <form name="sunRunTemplate" id="sunRunTemplate" novalidate="novalidate" style="overflow: hidden;padding: 50px 56px;border:1px solid #979797" class="ng-pristine ng-valid ng-valid-defined ng-valid-maxlength">
                        <div class="container" style="width: 100%">
                            <header class="header_box">
                                <div class="clearfix">
                                    <h1 class="header_title">SUNRUN</h1>
                                    <p class="header_sub">Invoice</p>
                                </div>
                                <hr>
                                <div class="header_info clearfix">
                                    <div class="fl" style="width: 400px">
                                        <dl class="info_list">
                                            <dt>Company:</dt>
                                            <dd style="padding-left:50px;text-align: right">
                                                <div>
                                                    {{template.purchaserCompanyName}}&nbsp
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Address:</dt>
                                            <dd style="text-align: right">

                                                <textarea ng-show="!IsEdit" rows="5" cols="60" style="width: 250px;height: 105px;border: none;padding: 0;text-align: right;color: #555555;"
                                                          type="text" name="custCompanyAddress" ng-model="template.custCompanyAddress"
                                                          required>

                                                </textarea>
                                                <textarea ng-show="IsEdit" rows="5" cols="60" style="width: 250px;height: 105px;color: #555555;"
                                                          type="text" name="custCompanyAddress" ng-model="template.custCompanyAddress"
                                                          placeholder="请输入对方地址" required>
                                                </textarea>
                                            </dd>

                                        </dl>
                                    </div>
                                    <div class="header_order fr">
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Trader:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.trader}}</span>
                                                <div ng-show="IsEdit" class="relative" style="display: inline-block">
                                                    <input  type="text" name="trader" ng-model="template.trader"
                                                            class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                            verification="{ruleType:'templatename'}" maxlength="30"
                                                            placeholder="请输入交易员名称" maxlength="30" style="margin-bottom: 20px; margin-right: 4px;" required>
                                                    <div class="verification justfiy"  style="bottom: 20px;left: -50px">
                                                        <span class="errors " ng-show="sunRunTemplate.trader.$viewValue && sunRunTemplate.trader.$error.defined && sunRunTemplate.trader.$dirty">{{sunRunTemplate.trader.errorTips}}</span>
                                                    </div>
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt>Order No:</dt>
                                            <dd>{{template.businessNo}}&nbsp</dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Invoice No:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.InvoiceNo}}</span>
                                                <div ng-show="IsEdit" class="relative" style="display: inline-block">
                                                    <input  type="text" name="InvoiceNo" ng-model="template.InvoiceNo"
                                                            class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                            verification="{ruleType:'imocode'}" maxlength="30"
                                                             maxlength="30" style="margin-bottom: 20px; margin-right: 4px;" required>
                                                    <div class="verification justfiy"  style="bottom: 20px;left: 0px">
                                                        <span class="errors " ng-show="sunRunTemplate.InvoiceNo.$viewValue && sunRunTemplate.InvoiceNo.$error.defined && sunRunTemplate.InvoiceNo.$dirty">{{sunRunTemplate.InvoiceNo.errorTips}}</span>
                                                    </div>
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Date:</dt>
                                            <div class="relative" style="display: inline-block;left: 100px" >
                                                <input ng-show="IsEdit" type="text"  id="createTime" ng-model="template.createTime" name="createTime" ng-change="createTimeFormat(template.createTime)"
                                                       class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength" readonly>
                                            </div>
                                            <span ng-show="!IsEdit" style="float: right;">{{template.createTime}}</span>
                                        </dl>
                                        <dl class="info_list">
                                            <dt>Page:</dt>
                                            <dd>{{pageSize}}</dd>
                                        </dl>
                                    </div>
                                </div>
                            </header>
                            <main>
                                <h2 class="content_title">FOR ACCOUNT OF BUYERS BELOW</h2>
                                <section class="content_box" style="text-align: left;">
                                    <span ng-show="!IsEdit">{{template.shipName}}</span>
                                    <div class="relative" ng-show="IsEdit" style="display: inline-block;margin-bottom: 20px">
                                        <span class="content-title"><b>*</b></span>
                                        <input type="text" name="shipName" ng-model="template.shipName"
                                               class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                               verification="{ruleType:'templatename'}" maxlength="30" placeholder="请输入船名" required>
                                        <div class="verification justfiy">
                                            <span class="errors " ng-show="sunRunTemplate.shipName.$viewValue && sunRunTemplate.shipName.$error.defined && sunRunTemplate.shipName.$dirty">{{sunRunTemplate.shipName.errorTips}}</span>
                                        </div>
                                    </div>

                                    <span>  and jointly and severally Owners and/or managing Owners</span>

                                    <p> and/or master and/or operators and/or managers<br>
                                        and/or Disponent Owners and/or charterers and/or<br>
                                    </p>
                                    <p>
                                        {{template.purchaserCompanyName}}
                                    </p>


                                    <div class="content_footer" style="margin-bottom: 20px">
                                        {{template.shipName}} at
                                        <span ng-show="!IsEdit" class="ng-binding ng-hide">{{template.destinationPort}}</span>
                                        <div class="relative" style="display: inline-block">
                                            <input ng-show="IsEdit" type="text" name="destinationPort" ng-model="template.destinationPort"
                                                   class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                   verification="{ruleType:'templatename'}" maxlength="30" placeholder="请输入目的港" required>
                                            <div class="verification justfiy" ng-show="IsEdit">
                                                <span class="errors " ng-show="sunRunTemplate.destinationPort.$viewValue && sunRunTemplate.destinationPort.$error.defined && sunRunTemplate.destinationPort.$dirty">{{sunRunTemplate.destinationPort.errorTips}}</span>
                                            </div>
                                        </div>
                                        on
                                        <input ng-show="IsEdit" type="text"  id="reachTime" ng-model="template.reachTime" name="reachTime" ng-change="reachTimeFormat(template.reachTime)"
                                               placeholder="抵达日期" style="width:150px;padding-left:2px;display: inline-block" autocomplete="off" required readonly>
                                        <span ng-show="!IsEdit" >{{template.reachTime}}</span>

                                    </div>
                                </section>
                                <section class="content_box content_table">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th>
                                                <div class="checkbox checkbox-info">
                                                    <input type="checkbox" ng-checked="isAllchecked" ng-click="checkAll(template.orderGoods)">
                                                    <label></label>
                                                </div>
                                            </th>
                                            <th>Product</th>
                                            <th>Quantity</th>
                                            <th>Unit</th>
                                            <th>Unit Price {{template.currencyUnit}}</th>
                                            <th>Total {{template.currencyUnit}}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="item in template.orderGoods">
                                            <td>
                                                <div class="checkbox checkbox-info">
                                                    <input type="checkbox" ng-click="checkOne(item,template.orderGoods)" ng-checked="item.checked"  />
                                                    <label></label>
                                                </div>
                                            </td>

                                            <td>
                                                <span style="word-break: break-all">{{item.goodsName}}</span>
                                            </td>
                                            <td>
                                                <span ng-show="!IsEdit">{{goodsNum(item)}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 15px">
                                                    <input ng-trim="false" ng-show="IsEdit" type="text" name="goodsNum{{$index}}" ng-model="item.goodsNum"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           verification="{ruleType:'totalprice'}"
                                                           maxlength="9" required style="width: 150px">
                                                    <div class="verification justfiy" ng-show="IsEdit">
                                                        <span class="errors " ng-show="sunRunTemplate.goodsNum{{$index}}.$viewValue && sunRunTemplate.goodsNum{{$index}}.$error.defined && sunRunTemplate.goodsNum{{$index}}.$dirty">请输入数字，小数点后最多4位</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{item.goodsUnit}}</td>
                                            <!--<td>{{goodsPrice(item)}}</td>-->
                                            <td>
                                                <span ng-show="!IsEdit">{{goodsPrice(item)}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 15px">
                                                    <input ng-trim="false" ng-show="IsEdit" type="text" name="goodsPrice{{$index}}" ng-model="item.goodsPrice"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           verification="{ruleType:'price'}"
                                                           maxlength="9" required style="width: 150px">
                                                    <div class="verification justfiy" ng-show="IsEdit">
                                                        <span class="errors " ng-show="sunRunTemplate.goodsPrice{{$index}}.$viewValue && sunRunTemplate.goodsPrice{{$index}}.$error.defined && sunRunTemplate.goodsPrice{{$index}}.$dirty">请输入数字，小数点后最多2位</span>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>{{goodsToTal(item)}}</td>
                                        </tr>
                                        <tr>
                                            <td colspan="5">
                                                <div>
                                                    <label>商品</label>
                                                    <div style="display: inline-block">
                                                        <input ng-trim="false" name="orderGood" type="text" id="orderGood" ng-model="orderGood"  placeholder="请输入商品" readonly="readonly">
                                                    </div>

                                                    <div class="btn-group clearfix" style="margin-left: 37px">
                                                        <button type="button" class="btn btn-primary btn-bill" style="border: 1px solid #4f81bd;background-color: #4f81bd;" ng-click="addGoods()" >添加</button>
                                                        <button type="button" class="btn btn-primary btn-bill" style="border: 1px solid #4f81bd;background-color: #4f81bd;" ng-click="deleteGoods()" >删除</button>
                                                    </div>

                                                </div>

                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5">Total {{template.currencyUnit}} Excl.VAT</td>
                                            <td>{{allGoodsToTal(template.orderGoods)}}</td>
                                        </tr>
                                        <tr>
                                            <td colspan="5">VAT</td>
                                            <td>
                                                <div class="relative" style="display: inline-block;margin-bottom: 20px">
                                                    <span ng-show="!IsEdit">{{Vat(template.vat)}}</span>
                                                    <input ng-trim="false" ng-show="IsEdit" type="text" name="vat" ng-model="template.vat"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           verification="{ruleType:'price'}"
                                                           placeholder="请输入增值税" maxlength="9" required>
                                                    <div class="verification justfiy" ng-show="IsEdit">
                                                        <span class="errors " ng-show="sunRunTemplate.vat.$viewValue && sunRunTemplate.vat.$error.defined && sunRunTemplate.vat.$dirty">{{sunRunTemplate.vat.errorTips}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="4" >Total value in our account latest
                                                <input ng-show="IsEdit" type="text"  id="latestPayTime" ng-model="template.latestPayTime" name="latestPayTime"
                                                       ng-change="latestPayTimeFormat(template.latestPayTime)"
                                                       placeholder="最迟付款日期" style="width:150px;padding-left:2px" autocomplete="off" required readonly>
                                                <span ng-show="!IsEdit" >{{template.latestPayTime}}</span>
                                            </td>
                                            <td >Total {{template.currencyUnit}}</td>
                                            <td >{{totalAmount()}}
                                        </tr>
                                        <tr>
                                            <td colspan="6" style="position: relative">
                                                <textarea style="width: 900px;height: 80px;"
                                                          ng-trim="false" ng-show="IsEdit" name="remarkOne" placeholder="备注"
                                                          ng-model="template.remarkOne"
                                                          class="test_e85b565e ng-pristine ng-valid ng-valid-maxlength ng-touched ng-untouched" >
                                                </textarea>
                                                <!--<div ng-show="IsEdit" style="position: absolute;bottom: 40px;right: 182px;">-->
                                                    <!--<span class="test_22650be8">{{remarkOnetextareaNumber}}</span>字-->
                                                <!--</div>-->
                                                <div style="width: 900px;display: inline-block;">
                                                    <pre style="margin: 0;font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;"
                                                         ng-show="!IsEdit" class="ng-hide">{{template.remarkOne}}</pre>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </section>
                                <section class="content_box">
                                    <p class="text_bold">Please transfer payment to:</p>
                                    <div class="content_info">
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Account NO.:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.accountNo}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 20px">
                                                    <input ng-show="IsEdit" type="text" name="accountNo" ng-model="template.accountNo" style="width: 500px" id="accountNo"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           verification="{ruleType:'imocode'}" maxlength="30" placeholder="请输入帐号" required ng-click="initAccountNo()">
                                                    <div class="verification justfiy" ng-show="IsEdit">
                                                        <span class="errors " ng-show="sunRunTemplate.accountNo.$viewValue && sunRunTemplate.accountNo.$error.defined && sunRunTemplate.accountNo.$dirty">{{sunRunTemplate.accountNo.errorTips}}</span>
                                                    </div>
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Bank:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.bankName}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 20px">
                                                    <input ng-show="IsEdit" type="text" name="bankName" ng-model="template.bankName" style="width: 500px"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           maxlength="200" placeholder="请输入银行" required>
                                                </div>

                                            </dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Address:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.bankAddr}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 20px">
                                                    <input ng-show="IsEdit" type="text" name="bankAddr" ng-model="template.bankAddr" style="width: 500px" id="bankAddr"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           maxlength="200" placeholder="请输入银行地址" required>
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Swift:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.Swift}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 20px">
                                                    <input ng-show="IsEdit" type="text" name="Swift" ng-model="template.Swift" style="width: 500px"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           verification="{ruleType:'imocode'}" maxlength="11" placeholder="请输入swift码" required>
                                                    <div class="verification justfiy" ng-show="IsEdit">
                                                        <span class="errors " ng-show="sunRunTemplate.Swift.$viewValue && sunRunTemplate.Swift.$error.defined && sunRunTemplate.Swift.$dirty">{{sunRunTemplate.Swift.errorTips}}</span>
                                                    </div>
                                                </div>
                                            </dd>
                                        </dl>

                                        <dl class="info_list">
                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Holder:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.holder}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 20px">
                                                    <input ng-show="IsEdit" type="text" name="holder" ng-model="template.holder" style="width: 500px"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           verification="{ruleType:'templatename'}" maxlength="30" placeholder="请输入帐号" required>
                                                    <div class="verification justfiy" ng-show="IsEdit">
                                                        <span class="errors " ng-show="sunRunTemplate.holder.$viewValue && sunRunTemplate.holder.$error.defined && sunRunTemplate.holder.$dirty">{{sunRunTemplate.holder.errorTips}}</span>
                                                    </div>
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="info_list">

                                            <dt><span class="content-title"><b ng-show="IsEdit">*</b></span>Currency:</dt>
                                            <dd>
                                                <span ng-show="!IsEdit">{{template.payCurrency}}</span>
                                                <div class="relative" style="display: inline-block;margin-bottom: 20px">
                                                    <input ng-show="IsEdit" type="text" name="payCurrency" ng-model="template.payCurrency" style="width: 500px"
                                                           class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                           verification="{ruleType:'templatename'}" maxlength="30" required>
                                                    <div class="verification justfiy" ng-show="IsEdit">
                                                        <span class="errors " ng-show="sunRunTemplate.payCurrency.$viewValue && sunRunTemplate.payCurrency.$error.defined && sunRunTemplate.payCurrency.$dirty">{{sunRunTemplate.payCurrency.errorTips}}</span>
                                                    </div>
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="info_list">
                                            <dt>Reference:</dt>
                                            <dd>{{template.businessNo}}</dd>
                                        </dl>
                                    </div>
                                    <p>
                                        For payment later than {{template.reachTime}} an interest of 3 percentage per month will apply. Payment should be made in <br>
                                        full with all charges for payer's account. Please be sure to state the Order Number {{template.businessNo}} when <br>
                                        arranging payment in order for the money to be allocated against the correct invoice.
                                    </p>

                                    <div style="position: relative">
                                        <textarea style="width: 900px;height: 80px;"
                                                  ng-trim="false" ng-show="IsEdit" name="remarkTwo" placeholder="备注"
                                                  ng-model="template.remarkTwo"
                                                  class="test_e85b565e ng-pristine ng-valid ng-valid-maxlength ng-touched ng-untouched" >
                                                </textarea>
                                        <!--<div ng-show="IsEdit" style="position: absolute;bottom: 40px;right: 182px;">-->
                                            <!--<span class="test_22650be8">{{remarkTwotextareaNumber}}</span>字-->
                                        <!--</div>-->
                                        <div style="width: 900px;display: inline-block;">
                                            <pre style="margin: 0;font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;"
                                                 ng-show="!IsEdit" class="ng-hide">{{template.remarkTwo}}</pre>
                                        </div>
                                    </div>


                                </section>
                            </main>
                            <hr>
                            <footer class="footer_box clearfix">
                                <div class="footer_address fl">
                                    <textarea ng-show="!IsEdit" rows="5" cols="60" style="width: 250px;border: none;padding: 0;text-align: left"
                                              type="text" name="companyAddress" ng-model="template.companyAddress"
                                              required>
                                        </textarea>

                                    <span class="content-title" style="position: relative;top: -77px;"><b ng-show="IsEdit">*</b></span>
                                    <textarea ng-show="IsEdit" rows="5" cols="60" style="width: 250px;height: 94px;"
                                              type="text" name="companyAddress" ng-model="template.companyAddress"
                                              placeholder="请输入对方地址"  required>
                                    </textarea>

                                </div>
                                <div class="footer_touch fr">
                                    <dl class="info_list">
                                        <dt style=" position: absolute;top: 0;left: 0;">
                                            <span class="content-title" style="    position: absolute;left: -8px;">
                                                <b ng-show="IsEdit">*</b>
                                            </span>
                                            Phone:
                                        </dt>
                                        <dd style="margin-left: 50px;text-align: right">
                                            <span ng-show="!IsEdit">
                                                    {{template.companyPhone}}</span>
                                            <div class="relative" style="display: inline-block">
                                                <input ng-show="IsEdit" type="text" name="companyPhone" ng-model="template.companyPhone"
                                                       class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                       validate-code="{ruleReg:'fix', ruleRegMsg:'请输入数字、空格和符号()-+'}" maxlength="30"
                                                       style="margin-bottom: 20px" required>
                                                <div class="verification justfiy" ng-show="IsEdit" style="bottom: 20px">
                                                    <span class="errors " ng-show="sunRunTemplate.companyPhone.$viewValue && sunRunTemplate.companyPhone.$error.defined && sunRunTemplate.companyPhone.$dirty">{{sunRunTemplate.companyPhone.errorTips}}</span>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="info_list">
                                        <dt style=" position: absolute;top: 0;left: 0;">
                                            <span class="content-title" style="    position: absolute;left: -8px;">
                                                <b ng-show="IsEdit">*</b>
                                            </span>
                                            Fax:
                                        </dt>
                                        <dd style="margin-left: 50px;text-align: right">
                                            <span ng-show="!IsEdit">
                                                    {{template.companyFax}}</span>
                                            <div class="relative" style="display: inline-block">
                                                <input ng-show="IsEdit" type="text" name="companyFax" ng-model="template.companyFax"
                                                       class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                       validate-code="{ruleReg:'fix', ruleRegMsg:'请输入数字、空格和符号()-+'}" maxlength="30"
                                                       style="margin-bottom: 20px" required>
                                                <div class="verification justfiy" ng-show="IsEdit" style="bottom: 20px">
                                                    <span class="errors " ng-show="sunRunTemplate.companyFax.$viewValue && sunRunTemplate.companyFax.$error.defined && sunRunTemplate.companyFax.$dirty">{{sunRunTemplate.companyFax.errorTips}}</span>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="info_list">
                                        <dt style=" position: absolute;top: 0;left: 0;"><span class="content-title" style="position: absolute;left: -8px;"><b ng-show="IsEdit">*</b></span>E-mail:</dt>
                                        <dd style="margin-left: 50px;text-align: right">
                                            <span ng-show="!IsEdit" >{{template.companyEmail}}</span>
                                            <div class="relative" style="display: inline-block">
                                                <input ng-show="IsEdit" type="text" name="companyEmail" ng-model="template.companyEmail"
                                                       class="input-text ng-pristine ng-untouched ng-valid ng-valid-defined ng-valid-maxlength"
                                                       validate-code="{ruleReg:'email', ruleRegMsg:'邮箱格式不正确', maxLength:'30'}"
                                                       placeholder="我方代表电子邮件" maxlength="30" required style="margin-bottom: 20px">
                                                <div class="verification justfiy" style="top: 30px;" ng-show="IsEdit">
                                                    <span class="errors  ng-binding ng-hide" ng-show="sunRunTemplate.companyEmail.$viewValue && sunRunTemplate.companyEmail.$error.defined && sunRunTemplate.companyEmail.$dirty">{{sunRunTemplate.companyEmail.errorTips}}</span>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </footer>
                        </div>
                    </form>
                    <div class="btn-group btn-group-center" >
                        <button ng-if="IsEdit"class="btn btn-primary" ng-click="confirm()">确定</button>
                        <a  style="display: inline-block; height: 34px;" class="btn btn-primary" ng-if="!IsEdit" href="{{fileUrl}}"
                            download="{{template.reachTime}} inv no {{template.shipName}} at {{template.destinationPort}}.pdf">下载</a>

                    </div>







                        <form id="DeliveryOrder" name="sunRunDeliverOrderConfirm" novalidate="novalidate" style="display:none;width: 675px;padding: 42.2px 0px 0px 0px;margin: 0 auto; overflow: hidden;">
                        <div style="margin: 0 auto;width: 675px;color: #000000;font-family:Arial;" id="sunRunDeliverOrderConfirm">
                            <div>
                                <div id="title" style="position: relative">

                                    <div style="width: 205px;height:57px;position: absolute;top:-20px"></div>

                                    <div style="text-align:right;">
                                        <div style="color: #4f81bd;font-size: 30px;font-family:Arial,Helvetica,sans-serif;">Invoice</div>
                                    </div>

                                </div>

                                <div style="border-bottom: 4px solid #4f81bd;">
                                </div>
                                <div style="padding: 16px 0 40px;position: relative;overflow: hidden;font-size: 12px;font-family:Arial,Helvetica,sans-serif;">
                                    <div style="float:left;">
                                        <div>
                                            <div style="width:100px;text-align: left;display: inline-block">Company:</div>
                                            <div style="margin-left: 1px;width:200px;display: inline-block;text-align: left;vertical-align: top;">{{template.purchaserCompanyName}}</div>
                                        </div>
                                        <div>
                                            <div style="position: absolute;left:0;width:100px;text-align: left;display: inline-block">Address:</div>
                                            <div style="width:200px;display: inline-block;text-align: left;vertical-align: top;margin-left: 105px">
                                                <pre style="margin: 0;padding: 0;font-family:Arial,Helvetica,sans-serif;">{{template.custCompanyAddress}}</pre>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="float: right;">
                                        <div>
                                            <div style="width:100px;text-align: right;display: inline-block">Trader:</div>
                                            <div style="width:200px;display: inline-block;text-align: right;vertical-align: top;color: #000000">{{template.trader}}</div>
                                        </div>
                                        <div>
                                            <div style="width:100px;text-align: right;display: inline-block">Order No:</div>
                                            <div style="width:200px;display: inline-block;text-align: right;vertical-align: top;">{{template.businessNo}}</div>
                                        </div>
                                        <div>
                                            <div style="width:100px;text-align: right;display: inline-block">Invoice No:</div>
                                            <div style="width:200px;display: inline-block;text-align: right;vertical-align: top;">{{template.InvoiceNo}}</div>
                                        </div>
                                        <div>
                                            <div style="width:100px;text-align: right;display: inline-block">Date:</div>
                                            <div style="width:200px;display: inline-block;text-align: right;vertical-align: top;">{{template.createTime}}</div>
                                        </div>
                                        <div>
                                            <div style="width:100px;text-align: right;display: inline-block">Page:</div>
                                            <div style="width:200px;display: inline-block;text-align: right;vertical-align: top;">&Page&</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style=" margin-bottom: 18px;padding-bottom: 6px;border: 2px solid #366092;font-family:Arial,Helvetica,sans-serif;">
                                <div style="padding: 1.2px 9.6px;background-color: #4f81bd;color: #fff;font-size: 16px;">
                                    <pre style="text-align: left;line-height: 6px;font-family:Arial,Helvetica,sans-serif;padding: 0">FOR ACCOUNT OF BUYERS BELOW</pre>
                                </div>
                                <div style="text-align: left;padding: 8px;font-size: 12px;">
                                    <pre style="line-height: 6px;font-family:Arial,Helvetica,sans-serif;margin: 0;padding: 0">
                                        <p style="margin: 0">{{template.shipName}}  and jointly and severally Owners and/or managing Owners</p>
                                        <p style="margin: 0">and/or master and/or operators and/or managers</p>
                                        <p style="margin: 0">and/or Disponent Owners and/or charterers and/or</p>
                                        <p style="margin: 0;line-height: 1.5">{{template.purchaserCompanyName}}</p>
                                    </pre>


                                    <div style="margin-top: 35px;margin-bottom: 7px">
                                        <pre style="line-height: 6px;font-family:Arial,Helvetica,sans-serif;">{{template.shipName}} at {{template.destinationPort}} on {{template.reachTime}}</pre>
                                    </div>
                                </div>
                                <div style="margin-bottom: 12px;padding: 0;text-align: left;">
                                    <table style=" width: 100%;border-collapse: collapse;border-spacing: 0;font-family:Arial,Helvetica,sans-serif;">
                                        <thead>
                                        <tr>
                                            <th style="width: 20%;padding: 2.4px 4.8px; background-color: #4f81bd;color: #fff;font-size: 16px">Product</th>
                                            <th style="width: 20%;padding: 2.4px 4.8px; background-color: #4f81bd;color: #fff;font-size: 16px">Quantity</th>
                                            <th style="width: 20%;padding: 2.4px 4.8px; background-color: #4f81bd;color: #fff;font-size: 16px">Unit</th>
                                            <th style="text-align:right;width: 20%;padding: 2.4px 4.8px; background-color: #4f81bd;color: #fff;font-size: 16px">Unit Price {{template.currencyUnit}}</th>
                                            <th style="text-align:right;width: 20%;padding: 2.4px 4.8px; background-color: #4f81bd;color: #fff;font-size: 16px">Total {{template.currencyUnit}}</th>
                                        </tr>
                                        </thead>
                                        <tbody style="font-size: 12px">
                                        <tr ng-repeat="item in template.orderGoods" >
                                            <td style="padding: 8px;word-break: break-all; ">{{item.goodsName}}</td>
                                            <td style="padding: 8px;">{{goodsNum(item)}}</td>
                                            <td style="padding: 8px;">{{item.goodsUnit}}</td>
                                            <td style="text-align:right;;padding: 8px;">{{goodsPrice(item)}}</td>
                                            <td style="text-align:right;;padding: 8px;">{{goodsToTal(item)}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 8px;"colspan="4">Total {{template.currencyUnit}} Excl.VAT</td>
                                            <td style="padding: 8px;text-align: right">{{allGoodsToTal(template.orderGoods)}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 8px;" colspan="4">VAT</td>
                                            <td style="text-align:right;padding: 8px;">{{Vat(template.vat)}}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div style="border-bottom: 1px solid #4F81BD; border-top: 1px solid #4F81BD;font-family:Arial,Helvetica,sans-serif;margin: 0;padding: 0">
                                        <div style="padding: 8px;width: 449px;font-size: 12px;display: table-cell;">Total value in our account latest {{template.latestPayTime}}</div>
                                        <div style="padding: 8px;width: 133px;font-size: 12px;display: table-cell;">Total {{template.currencyUnit}}</div>
                                        <div style="text-align:right;padding: 8px;width: 134px;font-size: 12px;display: table-cell;">{{totalAmount()}}</div>
                                        <pre ng-if="template.remarkOne" style="padding: 8px;font-size: 12px;font-family:Arial,Helvetica,sans-serif;;margin: 0;">{{template.remarkOne}}</pre>
                                    </div>
                                </div>
                                <div style="text-align: left;padding: 8px;font-size: 12px;font-family:Arial,Helvetica,sans-serif;color: #000000;">
                                    <p style="font-weight: 700;">Please transfer payment to:</p>
                                    <div style="padding: 24px 0;">
                                        <div>
                                            <div style="display: inline-block;width: 100px;text-align: right">Bank:</div>
                                            <div style="display: inline-block;width: 400px;text-align: left;vertical-align: top;">
                                                {{template.bankName}}
                                            </div>
                                        </div>
                                        <div>
                                            <div style="display: inline-block;width: 100px;text-align: right">Address:</div>
                                            <div style="display: inline-block;width: 400px;text-align: left;vertical-align: top;">
                                                <span >{{template.bankAddr}}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <div style="display: inline-block;width: 100px;text-align: right">Swift:</div>
                                            <div style="display: inline-block;width: 400px;text-align: left;vertical-align: top;">
                                                <span>{{template.Swift}}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <div style="display: inline-block;width: 100px;text-align: right">Account NO.:</div>
                                            <div style="display: inline-block;width: 400px;text-align: left;vertical-align: top;">
                                                <span>{{template.accountNo}}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <div style="display: inline-block;width: 100px;text-align: right">Holder:</div>
                                            <div style="display: inline-block;width: 400px;text-align: left;vertical-align: top;">
                                                <span>{{template.holder}}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <div style="display: inline-block;width: 100px;text-align: right">Currency:</div>
                                            <div style="display: inline-block;width: 400px;text-align: left;vertical-align: top;">{{template.payCurrency}}</div>
                                        </div>
                                        <div>
                                            <div style="display: inline-block;width: 100px;text-align: right">Reference:</div>
                                            <div style="display: inline-block;width: 400px;text-align: left;vertical-align: top;">{{template.businessNo}}</div>
                                        </div>
                                    </div>
                                    <p>
                                        For payment later than {{template.reachTime}} an interest of 3 percentage per month will apply. Payment should be made in <br>
                                        full with all charges for payer's account. Please be sure to state the Order Number {{template.businessNo}} when
                                        arranging payment in order for the money to be allocated against the correct invoice.
                                    </p>
                                    <pre ng-if="template.remarkTwo" style="font-size: 12px;margin: 0;font-family:Arial,Helvetica,sans-serif;">{{template.remarkTwo}}</pre>
                                </div>
                            </div>
                            <hr style="margin: 0;border: 0;border-bottom: 4px solid #4f81bd;">
                            <div style="padding: 6.4px 9.6px;font-size: 12px;font-family:Arial,Helvetica,sans-serif;color: #000000">
                                <div style="float: left;font-size: 12px;text-align: left;">
                                    <pre style="width: 250px;border: none;padding: 0;margin:0;font-size: 12px;text-align: left;font-family:Arial,Helvetica,sans-serif">{{template.companyAddress}}
                                    </pre>
                                </div>
                                <div style="padding-right: 24px;float: right;">
                                    <dl style="position: relative;margin: 0">
                                        <dt style="position: absolute;top: 0;left: 0;">Phone:</dt>
                                        <dd>{{template.companyPhone}}</dd>
                                    </dl>
                                    <dl style="position: relative;margin: 0">
                                        <dt style="position: absolute;top: 0;left: 0;">Fax:</dt>
                                        <dd>{{template.companyFax}}</dd>
                                    </dl>
                                    <dl style="position: relative;margin: 0">
                                        <dt style="position: absolute;top: 0;left: 0;">E-mail:</dt>
                                        <dd>
                                            <span>{{template.companyEmail}}</span>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

